[问题] swiper-item 不会随内容自动撑开

在微信小程序中，<swiper-item> 默认不会根据其内容自动撑开高度。如果你希望 <swiper-item> 能够根据内容自适应高度，你需要进行一些额外的配置。以下是一些常见的方法来解决这个问题：

方法一：使用 display: flex; 和 align-items: stretch;

你可以通过设置 swiper 和 swiper-item 的样式来使它们能够根据内容自适应高度。

WXML 文件

<swiper
  style="height: 100vh;"
  display="flex"
  align-items="stretch"
>
  <block wx:for="{{items}}" wx:key="index">
    <swiper-item
      style="display: flex; flex-direction: column; justify-content: center; align-items: center;"
    >
      <view class="item-content">
        <!-- 这里可以放置图片、文字等 -->
        <text>{{item.text}}</text>
      </view>
    </swiper-item>
  </block>
</swiper>

WXSS 文件

/* pages/index/index.wxss */
swiper {
  height: 100vh; /* 设置 swiper 的高度为视口高度 */
  display: flex;
  align-items: stretch; /* 使所有子元素（swiper-item）的高度一致 */
}

swiper-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

方法二：动态计算高度

如果你需要更复杂的布局，并且内容高度不固定，可以通过 JavaScript 动态计算每个 swiper-item 的高度，并将其设置到 swiper 上。

WXML 文件

<swiper
  style="height: {{swiperHeight}}px;"
  bindtransition="onSwiperTransition"
>
  <block wx:for="{{items}}" wx:key="index">
    <swiper-item>
      <view class="item-content" id="item-{{index}}">
        <!-- 这里可以放置图片、文字等 -->
        <text>{{item.text}}</text>
      </view>
    </swiper-item>
  </block>
</swiper>

JS 文件

// pages/index/index.js
Page({
  data: {
    items: [
      { text: "Item 1 with some content" },
      { text: "Item 2 with more content that may be longer" },
      { text: "Item 3 with a short content" },
    ],
    swiperHeight: 0,
  },

  onReady: function () {
    this.calculateSwiperHeight();
  },

  onSwiperTransition: function (e) {
    // 当 swiper 切换时重新计算高度
    this.calculateSwiperHeight();
  },

  calculateSwiperHeight: function () {
    const query = wx.createSelectorQuery().in(this);
    const itemHeights = [];

    this.data.items.forEach((item, index) => {
      query
        .select(`#item-${index}`)
        .boundingClientRect((rect) => {
          if (rect) {
            itemHeights.push(rect.height);
          }
        })
        .exec();
    });

    query.exec(() => {
      const maxHeight = Math.max(...itemHeights);
      this.setData({
        swiperHeight: maxHeight,
      });
    });
  },
});

方法三：使用 min-height 和 max-height

你也可以设置 min-height 和 max-height 来确保 swiper-item 至少有一个最小高度，同时允许它扩展以容纳更多内容。

WXML 文件

<swiper
  style="height: 100vh;"
>
  <block wx:for="{{items}}" wx:key="index">
    <swiper-item
      style="min-height: 300px; max-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center;"
    >
      <view class="item-content">
        <!-- 这里可以放置图片、文字等 -->
        <text>{{item.text}}</text>
      </view>
    </swiper-item>
  </block>
</swiper>

WXSS 文件

/* pages/index/index.wxss */
swiper {
  height: 100vh; /* 设置 swiper 的高度为视口高度 */
}

swiper-item {
  min-height: 300px; /* 最小高度 */
  max-height: 500px; /* 最大高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item-content {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}

通过上述方法，你可以使 swiper-item 根据内容自适应高度。选择适合你具体需求的方法进行实现。希望这些示例能够帮助你解决问题。如果你有更具体的场景或需求，请告诉我，我可以提供更加详细的帮助。